﻿<div>

<h3>jQuery EasyUI menu 组件扩展</h3>
<p>该部分扩展由文件 jeasyui.extensions.menu.js 实现。</p>

<h4>扩展概述</h4>
<p>
    扩展基于 jquery.easyui.min.js 实现；主要扩展功能体现在：
    <ul>
        <li>增加了 easyui-menu 的自定义扩展属性 hideOnUnhover，用来判断是否当鼠标移出菜单时，才菜单自动隐藏</li>
        <li>增加了 easyui-menu 控件中 menu-item 的自定义扩展属性 hideOnClick、bold、style，对菜单项的字体、样式、是否隐藏进行设置</li>
        <li>重写了easyui-menu的扩展方法 createMenu，用于根据指定的属性创建 easyui-menu 对象</li>
        <li>重写了easyui-menu的扩展方法 showMenu，用于根据指定的属性创建 easyui-menu 对象并立即显示出来</li>
    </ul>
</p>

<h4>依赖项</h4>
<ul>
    <li>jquery.jdirk.js</li>
    <li>jeasyui.extensions.js</li>
</ul>


<h4>用法</h4>
<p>
    以下为示例代码
    <textarea name="dp-syntaxhighlighter" class="brush: js; highlight: [2,10,11]" >
        //  创建 easyui-menu 对象并立即显示出来
        $.easyui.showMenu({
            left: e.pageX, top: e.pageY,
            items: [
                { text: "Java", iconCls: "icon-hamburg-address" },
                { text: "C++", handler: function (e, item) { alert(item.text); } },
                {
                    text: function () { return "ASP.NET" },
                    disabled: function () { return window.event.clientX < 300; },
                    style: { color: "red" },
                    bold: true,
                    handler: function (e, item) { alert(item.text); }
                },
                "-",
                {
                    text: "数据库", children: [
                        { text: "Oracle", handler: function (e, item) { alert(item.text); } },
                        { text: "SQLSERVER", handler: function (e, item) { alert(item.text); } }
                    ]
                },
            ]
        });


        //  关于更多用法，请参见下面 API。
    </textarea>
</p>


<h4>扩展的属性</h4>
<p>该扩展增加定义了如下属性：</p>
<table class="doc-table">
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Description</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>hideOnUnhover</td>
        <td>boolean</td>
        <td>表示是否当鼠标移出菜单时，菜单才自动隐藏。</td>
        <td>true</td>
    </tr>

    <tr>
        <td>hideOnClick</td>
        <td>boolean</td>
        <td>表示点击该菜单项后整个菜单是否会自动隐藏，只有通过 $.easyui.createMenu 或者 $.easyui.showMenu 生成菜单时，才有效。</td>
        <td>true</td>
    </tr>

    <tr>
        <td>bold</td>
        <td>boolean</td>
        <td>表示该菜单项是否字体加粗，只有通过 $.easyui.createMenu 或者 $.easyui.showMenu 生成菜单时，才有效。</td>
        <td>false</td>
    </tr>

    <tr>
        <td>style</td>
        <td>JSON-Object</td>
        <td>表示要附加到该菜单项的样式,只有通过 $.easyui.createMenu 或者 $.easyui.showMenu 生成菜单时，才有效。</td>
        <td>null</td>
    </tr>

</table>


<!--<h4>扩展的事件</h4>
<p>该扩展增加定义了如下事件：</p>
<table class="doc-table">
    <tr>
        <th>Name</th>
        <th>Parameters</th>
        <th>Description</th>
        <th>Returns</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>-->


<h4>扩展的方法</h4>
<p>该扩展增加定义了如下方法：</p>
<table class="doc-table">
    <tr>
        <th>Name</th>
        <th>Parameters</th>
        <th>Description</th>
        <th>Returns</th>
    </tr>

    <tr>
        <td>createMenu</td>
        <td>options</td>
        <td>根据指定的属性创建 easyui-menu 对象；该方法定义如下参数：<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options: JSON 对象类型，参数属性继承 easyui-menu 控件的所有属性和事件（参考官方 API 文档），并在此基础上增加了如下参数：<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: 一个 String 对象，表示创建的菜单对象的 ID 属性，如果不定义该参数，将会分配一个随机值。<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 一个 String 对象，表示创建的菜单对象的 name 属性，如果不定义该参数，将会分配一个随机值。<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hideDisabledMenu: 一个 Boolean 值，默认为 false；该属性表示当菜单项的 disabled: true，是否自动隐藏该菜单项；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items: 一个 Array 对象，该数组对象中的每一个元素都是一个 JSON 格式对象用于表示一个 menu item （关于 menu item 对象属性，参考官方 API）；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;该数组中每个元素的属性，除 easyui-menu 中 menu item 官方 API 定义的属性外，还增加了如下属性：<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hideDisabledMenu: 该属性表示在当前子菜单级别下当菜单项的 disabled: true，是否自动隐藏该菜单项；一个 Boolean 值，取上一级的 hideDisabledMenu 值；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler: 一个回调函数，表示点击菜单项时触发的事件；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回调函数 handler 和回调函数 onclick 的签名都为 function(e, item, menu)，其中：<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e:  表示动作事件；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item:   表示当前点击的菜单项的 options 选项；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;menu:   表示整个菜单控件的 jQuery 对象。<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;函数中 this 指向触发事件的对象本身<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另，如果同时定义了 onclick 和 handler，则只处理 handler 而不处理 onclick，所以请不要两个回调函数属性同时使用。<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;children: 同上一级对象的 items 属性，为一个 Array 对象；<br />
          </td>
        <td>返回一个 JSON 格式对象，该返回的对象中具有如下属性：<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;menu: 依据于传入参数 options 构建出的菜单 DOM 元素对象，这是一个 jQuery 对象，该对象未初始化为 easyui-menu 控件，而只是具有该控件的 DOM 结构；<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options: 传入参数 options 解析后的结果，该结果尚未用于但可用于初始化 menu 元素。</td>
    </tr>

    <tr>
        <td>showMenu</td>
        <td>options</td>
        <td>根据指定的属性创建 easyui-menu 对象并立即显示出来；该方法定义的参数和本插件文件中的插件方法 createMenu 相同：<br />
            注意：本方法与 createMenu 方法不同之处在于：<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createMenu: 仅根据传入的 options 参数创建出符合 easyui-menu DOM 结构要求的 jQuery DOM 对象，但是该对象并未初始化为 easyui-menu 控件；<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showMenu: 该方法在 createMenu 方法的基础上，对创建出来的 jQuery DOM 对象立即进行 easyui-menu 结构初始化，并显示出来。<br />
            关于更多用法参见<a class="example" href="../examples/example.html?menu/custom" target="_blank">示例</a>
        </td>
        <td>返回一个 jQuery 对象，该对象表示创建并显示出的 easyui-menu 元素，该返回的元素已经被初始化为 easyui-menu 控件。</td>
    </tr>
</table>


<br />
</div>